<template>
    <div class="article_detail main   clearfloat" >
        <div class="fl bg_white">
            <div class="article">
                <div class="content">
                    <h1>{{article.questionTitle}}</h1>
                    <ul class="view clearfloat">
                        <li><i class="iconfont">&#xe6e4;</i>{{article.readers}}</li>
                        <li><i class="iconfont">&#xe70c;</i>{{article.commentContents.length}}</li>
                        <li class="label"><span>来自:{{article.questionLabel}}</span></li>
                    </ul>
                    <div class="article_body" v-html="article.content">{{article.content}}</div>
                </div>
            </div>
            <div class="adopt">
                <div>
                    <span class="greenbox">已采纳</span>
                    <span class="username">admin </span>
                    <span class="ans">的回答：</span>
                </div>
                <div class="sm">zhesdjaghaskgkal;jgakl;jgl;asjg;sl</div>
            </div>
            <div class="discuss" id="discuss">
                <h3 class="h3" id="comment">回答</h3>
                <!-- 登录显示评论输入框 -->
                <div class="textare clearfloat" v-if="isLoging">
                    <div class="clearfloat">
                        <!-- 评论输入框左侧的头像 -->
                        <div class="header fl">
                            <img v-bind:src="userHeader|filterHeader" alt="" v-if="userHeader">
                            <i class="iconfont" v-else>&#xe638;</i>
                        </div>
                        <quill-editor ref="myTextEditor"
                                v-model="comments"
                                :options="editorOption"
                                @blur="onEditorBlur($event)"
                                @focus="hiddenError"                     
                                >
                        </quill-editor>
                    </div>
                    <div class="but fr" @click="submitComments">回答</div>
                </div>
                <!-- 未登录显示提示登录 -->
                <div class="login" v-else @click="login">
                    <button>登录</button><span>说说你的看法</span>
                </div>
                <!-- 一级评论 -->
                <div class="dis_content clearfloat" v-for="(item ,index) in commentContents">
                    <!-- 一级评论头像 -->
                    <div class="user fl">
                        <div class=" header">
                            <img v-bind:src="item.userHeaderImg|filterHeader" alt="" v-if="item.userHeaderImg">
                            <i class="iconfont" v-else>
                               &#xe638;
                            </i>
                        </div>                       
                    </div>
                    <!-- 一级评论头像结束 -->
                    <!-- 用户信息和评论内容 -->
                    <div class="dis fl">
                        <!-- 用户名和用户ID -->
                        <router-link tag="h4" v-bind:to="'/personHome/'+item.userId">{{item.userName}}</router-link>
                        <!-- 一级评论内容 -->
                        <p class="txt" v-html="item.commentContents">{{item.commentContents}}</p>
                        <!--二级评论操作   时间 -->
                        <ul class="clearfloat">
                            <li>
                                <i class="iconfont">&#xe62b;</i>
                                <!-- 显示二级评论的条数 -->
                                <span v-if="!isComment[index]">{{item.reply.length|commentnumber}}</span>
                                <!-- 展开与影藏二级评论   isCommentChange[index]显示评论 还是收起评论-->
                                <span @click="isCommentFun" v-bind:index="index" v-bind:commentId="item._id" class="pointer sm">{{isCommentChange[index]}}</span>
                            </li>
                            <!-- 时间 -->
                            <li>{{item.createdAt|filterDate}}</li>
                            <li v-bind:commentId="item._id" class="dele"  @click="delComments">删除</li>
                        </ul>
                    </div>
                    <!-- 用户信息和评论内容结束 -->
                     <div class="both"></div>
                     <!-- 二级评论   isComment[index]控制二级评论显示与影藏 ture显示  false隐藏 -->
                    <div v-if="isComment[index]" class="dis_bg" v-bind:index="index" v-bind:commentId="item._id">  
                         <!-- 二级评论不为空显示内容 -->
                        <div class="dis02 clearfloat" v-if="item.reply.length">
                            <!-- 二级评论循环 -->
                            <div  v-for="(reply,index) in replys[index]" class="clearfloat">
                                <!-- 二级评论头像 -->
                                <div class="user fl">
                                    <div class=" header">
                                        <img v-bind:src="reply.userHeaderImg|filterHeader" alt="" v-if="reply.userHeaderImg">
                                        <i class="iconfont" v-else>&#xe638;</i>
                                    </div>                       
                                </div>
                                <!-- 二级评论用户名和用户id -->
                                <div class="dis fl dis03">
                                    <router-link tag="h4" v-bind:to="'/personHome/'+reply.userId">{{reply.userName}}</router-link>
                                    <p>
                                        <!-- 二级评论信息 -->
                                        <ul class="clearfloat reply_width">
                                            <li><span class="huifu" v-if="reply.replyUserId">回复 <router-link v-bind:to="'personHome/'+reply.replyUserId" tag="a" class="bule huifu">{{reply.replyUserName}}</router-link><span v-if="reply.replyUserId">：</span></span>{{reply.commentContents}}</li>
                                        
                                        </ul>
                                        
                                    </p>
                                    <!-- 二级评论操作 -->
                                    <ul class="clearfloat">
                                        <li>{{reply.createdAt|filterDate}}</li>
                                        <li class="bule" @click="replyFun" v-bind:replyname="reply.userName" v-bind:replyId="reply.userId"
                                        v-bind:index='index'
                                        >回复</li>
                                        <li class="dele01 dele" v-bind:replyId="reply._id" @click="delreply">删除</li>
                                    </ul>
                                </div>   
                            </div>                                                 
                        </div>
                        <!-- 暂无二级评论 -->
                        <div class="no_reply" v-else>
                            <i class="iconfont">&#xe630;</i>
                            <p>暂无评论</p>
                        </div>
                        <div class="reply">
                            <input type="text" placeholder="输入评论" v-model="replyContent"  @focus="hiddenError" v-bind:id="'input'+index">
                            <button @click="releaseReply" v-bind:index="index" v-bind:commentId="item._id">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="fr">
            <div class="author bg_white">
                <div class="header">
                    <img v-bind:src="article.userId.headerImg|filterHeader" alt="" v-if="article.userId.headerImg">
                    <i class="iconfont" v-else>&#xe638;</i>                  
                </div>
                <h4 class="username">{{article.userId.username}}</h4>
                <p>{{article.userId.position}}</p>
                <ul class="im clearfloat">
                    <li>
                        <p>文章</p>
                        <h2>{{articleNumber}}</h2>
                    </li>
                    <li>
                        <p>作品</p>
                        <h2>{{workNumber}}</h2>
                    </li>
                    <li>
                        <p>粉丝</p>
                        <h2>{{article.userId.fans.length}}</h2>
                    </li>
                </ul>
                <div class="btn">
                    <button class="left"> 关注</button>
                    <button>私信</button>
                </div>
            </div>
        </div>
        <div class="error_message" v-bind:class="{isactive:error_message}">{{error_message}}</div>      
    </div>
</template>
<script>
import axios from "axios"
import dataformat from "../../assets/js/dateformat.js"
import filterHeader from '../../assets/js/filterHeaderImg.js'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
    export default {
        components:{
            'quill-editor':quillEditor
        },
        data(){
            return {
                article:{},//文章数据
                labels:[],//标签数据
                comments:"",//双向数据：用户发表评论
                error_message:'',//发表评论错误弹框信息
                commentContents:[],//评论数据
                isComment:[],//是否显示评论的评论
                isCommentChange:[],//点击评论  返回 评论  评论收起
                replys:[],//回复数据
                replyContent:'',//回复内容
                replyUserName:'',//回复的对象的用户名字
                replyUserId:"",//回复对象的id
                commentId:"",//一级评论的ID
                workNumber:'',
                articleNumber:'',
                editorOption: {
                modules: {
                        toolbar: [
                        [,{ 'header': 1 },{ 'header': 2 }],
                        ['bold', 'italic', 'underline'],
                        ['code-block','blockquote' ],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        ['link', 'image', 'video']
                        ],
                        syntax: {
                        highlight: text => hljs.highlightAuto(text).value
                        }
                    }
                }
            }
        },
        computed:{
            // 文章id  
            articleId:function(){
                return this.$route.params.id
            },
            // 是否登录
            isLoging:function(){
                return this.$store.state.isLoging
            },
            userHeader:function(){
                return this.$store.state.headerImg
            }
        },
        created:function(){
            var that = this;
            // 验证是否登录
            this.$store.dispatch('isloging');
            // 获取文章
            this.getArticle();
                   
        },
        updated:function(){
            
            var a = window.location.hash;
            if( /#comment/.test(a)){
                var comment = this.$el.querySelector("#comment").offsetTop;
                document.body.scrollTop = comment;
                document.documentElement.scrollTop = comment;
                window.pageYOffset = comment;
            }
            
        },
        methods:{
            // 提交评论
            submitComments:function(){
                var that = this;
                // 判断评论内容是否为空
                if(this.comments===""){
                    this.error_message="输入内容不能为空";
                    return
                }
                // 检测是否登录
                if(this.$store.state.isLoging){
                    // 如果登录可以发布评论
                    axios.post('/api/question/releaseComments',{
                        userName:that.$store.state.userName,
                        userId:that.$store.state.userId,
                        articleId:that.articleId,
                        commentContents:that.comments,
                        headerImg:that.$store.state.headerImg
                    }).then(function(response){
                        if(response.data.ok===1){
                            //更新评论
                           that.getComments();
                           that.comments = "";
                           
                        }                      
                    }).catch(function(err){
                        console.log(err)
                    })
                }else{
                    // 未登录弹出登录框
                   that.$store.commit('LOGINBOX',true)
                }
            },
            // 获取文章函数
            getArticle:function(){
                var that = this;
                axios.get('/api/question/getQuestionDetail',{
                    params:{
                        id:that.articleId
                    }
                }).then(function(response){
                    that.article = response.data[0];
                    console.log(response.data)
                    that.workNumber = response.data[1].workNumber;
                    that.articleNumber = response.data[2].articleNumber;
                    that.commentContents=response.data[0].commentContents.sort(that.dataSort);
                    for(var i=0; i<that.commentContents.length;i++){
                        that.isComment.push(false);
                        that.isCommentChange.push("评论");
                    }
                  
                }).catch(function(err){
                    console.log(err)
                })
            },
            // 点击回复按钮
            releaseReply:function(e){
                var that = this;
                var a = e.target.getAttribute('index')
                if(this.$store.state.isLoging){
                    // 如果登录可以发布评论
                    if(this.replyContent===""){
                        this.error_message="输入内容不能为空";
                        return
                    }
                    axios.post('/api/question/releaseReply',{
                        userName:that.$store.state.userName,
                        commentId:e.target.getAttribute('commentId'),
                        userId:that.$store.state.userId,
                        replyUserName:that.replyUserName,
                        replyUserId:that.replyUserId,
                        replyContent:that.replyContent,
                        headerImg:that.$store.state.headerImg
                    }).then(function(response){
                       if(response.data.ok===1){
                           that.replyContent='';
                           
                           document.getElementById('input'+a).setAttribute('placeholder','请输入回复内容');
                           that.replyUserName='';
                           that.replyUserId ='';
                           axios.get('/api/question/getReply',{
                            params:{
                                commentId:e.target.getAttribute('commentId')
                            }
                            }).then(function(repsonse){
                                that.$set(that.replys,a,repsonse.data.reply.sort(that.dataSort))
                                that.getComments(a)
                            })
                       }                    
                    }).catch(function(err){
                        console.log(err)
                    })
                }else{
                    // 未登录弹出登录框
                   that.$store.commit('LOGINBOX',true)
                }
            },
            // 点击回复获取回复对象的用户名字 和用户id
            replyFun:function(e){
                var a = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('index')
                this.replyUserName = e.target.getAttribute('replyname');
                this.replyUserId = e.target.getAttribute('replyId');
                var oInput = document.getElementById("input"+a);
                oInput.setAttribute('placeholder',"@"+this.replyUserName);
            },
            // 获取一级评论
            getComments:function(a){
                 var that = this;
                 axios.get('/api/question/getComments',{
                     params:{
                        id:that.articleId
                    }
                 }).then(function(response){
                     that.commentContents=response.data.commentContents.sort(that.dataSort);
                     for(var i=0; i<that.commentContents.length;i++){
                             if(i==a){
                                 that.$set(that.isComment,i,true);
                                 that.$set(that.isCommentChange,i,"收起评论");
                             }else{
                                 that.$set(that.isComment,i,false);
                                that.$set(that.isCommentChange,i,"评论");
                             }
                        
                    }
                    console.log(that.isComment)
                 })
            },
            // 未登录用户点击评论登录按钮弹出登录框
            login:function(){
                this.$store.commit('LOGINBOX',true)
            },
            // 隐藏错误体积框
            hiddenError:function(){
                this.error_message="";
            },
            // 时间排序函数
            dataSort:function(a,b){
                a = Date.parse(new Date(a.createdAt));
                b = Date.parse(new Date(b.createdAt));
                return b-a
            },
            // 评论的评论的显示与隐藏
            isCommentFun:function(e){
                var a = e.target.getAttribute('index');
                this.$set(this.isComment,a,!this.isComment[a]);
                this.$set(this.isCommentChange,a,this.isCommentChange[a]==="收起评论"?"评论":"收起评论");
                var that = this;
                if(this.isComment[a]){
                    axios.get('/api/question/getReply',{
                    params:{
                        commentId:e.target.getAttribute('commentId')
                    }
                    }).then(function(repsonse){
                        // that.replys = repsonse.data.reply.sort(that.dataSort);
                        that.$set(that.replys,a,repsonse.data.reply.sort(that.dataSort))
                    })
                }
            },
            // 删除评论
            delComments:function(e){
                var commentId = e.target.getAttribute('commentId');
                var r=confirm("您确定要删除这条评论吗？");
                var that= this;
                if(r===true){
                    axios.get('/api/question/delComment',{
                        params:{
                            commentId:commentId,
                            articleId:that.articleId
                        }
                    }).then(function(res){
                        if(res.data.ok===1){
                            that.getArticle()
                        }
                    })
                }
                
            },
            // 删除评论的评论
            delreply:function(e){
                var replyId = e.target.getAttribute('replyId');
                var commentId = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.getAttribute('commentId');
                var r=confirm("您确定要删除这条评论吗？");
                var that= this;
                if(r===true){
                    axios.get('/api/question/delReply',{
                        params:{
                            commentId:commentId,
                            articleId:that.articleId,
                            replyId: replyId
                        }
                    }).then(function(res){
                        if(res.data.ok===1){
                            axios.get('/api/question/getReply',{
                            params:{
                                commentId:commentId
                            }
                            }).then(function(repsonse){
                                that.replys = repsonse.data.reply.sort(that.dataSort); 
                                that.getComments()
                                   
                            })
                        }
                    })
                }
            }
        },      
        filters:{
           filterDate:dataformat,
           commentnumber:function(value){
               if(value>=1) return value+"条"
              
           },
           filterHeader:filterHeader
        }
    }
</script>
<style lang="scss" scoped src="../../assets/css/questionDetail.scss">
</style>

